<template>
	<view class="container">
		<view class="content">
			<view class="header flex_between">
				<view class="userinfo flex" @tap="pagePath('/pages/user/myaccount/myaccount')">
					<image class="avatar" :src="userInfo.avatar" mode=""></image>
					<view class="user">
						<view class="username font_title">{{userInfo.nick_name}}</view>
						<view class="user_id font_title">id:{{userInfo.id}}</view>
					</view>
				</view>
				<view class="setting flex_center">
					<uni-icons type="redo" color="#0065ff" style="margin-right:8rpx;"></uni-icons>
					<text>真实账户</text>
				</view>
			</view>
			<view class="balance">
				<view class="balance_header flex_between">
					<view class="font_title">余额</view>
					<view class="cold">
						<text>{{userInfo.frozen_price}}</text>
						<uni-icons type="closeempty" color="#fff"></uni-icons>
					</view>
				</view>
				<view class="balance_detail">
					<view class="data">
						<text style="font-size: 28rpx;">$</text><text
							style="padding: 0 10rpx;">{{userInfo.price}}</text>
						<uni-icons type="reload" color="#fff" style="opacity: .6;"></uni-icons>
					</view>
				</view>
				<view class="balance_btns flex_center">
					<view class="btn" @tap="pagePath('/pages/user/Deposit/Deposit')">
						<uni-icons custom-prefix="iconfont" type="icon-xiazai" size="16"
							style="font-weight: 600;margin-right: 16rpx;"></uni-icons>
						<text class="font_title">充值</text>
					</view>
					<view class="btn" @tap="pagePath('/pages/user/withdraw/withdraw')">
						<uni-icons custom-prefix="iconfont" type="icon-shangchuan" size="16"
							style="font-weight: 600;margin-right: 16rpx;"></uni-icons>
						<text class="font_title">提现</text>
					</view>
				</view>
			</view>
			<view class="nav">
				<view class="nav_title">通用</view>
				<view class="nav_list">
					<view class="item flex" @tap="pagePath('/pages/user/myaccount/myaccount')">
						<view class="icon_box flex_center">
							<uni-icons custom-prefix="iconfont" type="icon-yonghu" size="20"
								color="#0065ff"></uni-icons>
						</view>
						<text class="nav_name">我的账户</text>
						<uni-icons class="forward_icon" type="forward" color="#303133" size="22"></uni-icons>
					</view>
					<view class="item flex" @tap="pagePath('/pages/user/verified/verified')">
						<view class="icon_box flex_center">
							<uni-icons custom-prefix="iconfont" type="icon-zhifubao" size="20"
								color="#0065ff"></uni-icons>
						</view>
						<text class="nav_name">实名认证</text>
						<uni-icons class="forward_icon" type="forward" color="#303133" size="22"></uni-icons>
					</view>
					<view class="item flex" @tap="pagePath('/pages/user/wallet/wallet')">
						<view class="icon_box flex_center">
							<uni-icons custom-prefix="iconfont" type="icon-licai" size="20" color="#0065ff"></uni-icons>
						</view>
						<text class="nav_name">钱包</text>
						<uni-icons class="forward_icon" type="forward" color="#303133" size="22"></uni-icons>
					</view>
					<view class="item flex" @tap="copy">
						<view class="icon_box flex_center">
							<uni-icons custom-prefix="iconfont" type="icon-xingqudingxiang" size="20"
								color="#0065ff"></uni-icons>
						</view>
						<text class="nav_name">邀请好友</text>
						<text class="nav_tips">{{userInfo.code}}</text>
						<uni-icons class="forward_icon" type="forward" color="#303133" size="22"></uni-icons>
					</view>
					<view class="item flex" @tap="pagePath('/pages/user/notification/notification')">
						<view class="icon_box flex_center">
							<uni-icons custom-prefix="iconfont" type="icon-xinxifill" size="20"
								color="#0065ff"></uni-icons>
						</view>
						<text class="nav_name">消息通知</text>
						<view class="message_box" v-if="1==1">{{list.length}}</view>
						<uni-icons class="forward_icon" type="forward" color="#303133" size="22"></uni-icons>
					</view>
					<view class="item flex" @tap="navigateToService">
						<view class="icon_box flex_center">
							<uni-icons custom-prefix="iconfont" type="icon-18erji-2" size="20"
								color="#0065ff"></uni-icons>
						</view>
						<text class="nav_name">客户服务</text>
						<uni-icons class="forward_icon" type="forward" color="#303133" size="22"></uni-icons>
					</view>
				</view>
				<view class="nav_title">设置</view>
				<view class="nav_list">
					<view class="item flex" @tap="maskShow('lang')">
						<view class="icon_box flex_center">
							<uni-icons custom-prefix="iconfont" type="icon-wangluo" size="20"
								color="#0065ff"></uni-icons>
						</view>
						<text class="nav_name">语言</text>
						<text class="nav_tips">{{activeLang}}</text>
						<uni-icons class="forward_icon" type="forward" color="#303133" size="22"></uni-icons>
					</view>
					<!-- 					<view class="item flex" @tap="maskShow('theme')">
						<view class="icon_box flex_center">
							<uni-icons custom-prefix="iconfont" type="icon-tiantianquan" size="20"
								color="#0065ff"></uni-icons>
						</view>
						<text class="nav_name">主题</text>
						<view v-for="item in themeList" v-if="item.value==activeTheme">
							<uni-icons type="arrow-up" :color="item.up" style="font-weight: bold;"
								size="24"></uni-icons>
							<uni-icons type="arrow-down" :color="item.down" style="font-weight: bold;"
								size="24"></uni-icons>
						</view>
						<uni-icons class="forward_icon" type="forward" color="#303133" size="22"></uni-icons>
					</view> -->
				</view>
			</view>
		</view>
		<tabbarView id="5"></tabbarView>
		<u-popup :show="show" @close="closeMask">
			<view class="mask">
				<view class="mask_close flex_center" @tap="closeMask">
					<uni-icons type="closeempty"></uni-icons>
				</view>
				<view class="mask_content">
					<view class="mask_title">{{maskTitle}}</view>
					<view class="list" v-if="langShow">
						<view class="item flex_between" v-for="item in langList" @tap="changeLang(item)">
							<image class="item_logo" :src="item.img" mode=""></image>
							<view class="detail">
								<view class="item_value">{{item.value}}</view>
								<view class="item_title">{{item.title}}</view>
							</view>
							<view class="item_icon flex_center" :class="activeLang==item.value?'active_icon':''">
								<uni-icons custom-prefix="iconfont" type="icon-duigou" size="15"
									:color="activeLang==item.value?'#fff':'#3d3d3d'"></uni-icons>
							</view>
						</view>
					</view>
					<view class="list" v-if="themeShow">
						<view class="item flex_between" v-for="item in themeList" @tap="changeTheme(item)">
							<view class="detail flex">
								<uni-icons type="arrow-up" :color="item.up" style="font-weight: bold;"
									size="24"></uni-icons>
								<uni-icons type="arrow-down" :color="item.down" style="font-weight: bold;"
									size="24"></uni-icons>
							</view>
							<view class="item_icon flex_center" :class="activeTheme==item.value?'active_icon':''">
								<uni-icons custom-prefix="iconfont" type="icon-duigou" size="15"
									:color="activeTheme==item.value?'#fff':'#3d3d3d'"></uni-icons>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import tabbarView from "@/components/tabbar.vue"
	import {
		userInfoApi,
		getSettingApi,
		noticeListApi
	} from '@/api/api.js'
	export default {
		components: {
			tabbarView
		},
		data() {
			return {
				list: [],
				userInfo: [],
				show: false,
				langShow: false,
				themeShow: false,
				maskTitle: "",
				langList: [{
					title: "English",
					value: "en_US",
					img: "#"
				}, {
					title: "简体中文",
					value: "zh_CN",
					img: "#"
				}],
				themeList: [{
					up: "#0065ff",
					down: "#f05150",
					value: "theme1"
				}, {
					up: "#f05150",
					down: "#0065ff",
					value: "theme2"
				}],
				activeLang: uni.getStorageSync("lang"),
				activeTheme: uni.getStorageSync("theme")
			};
		},
		onShow() {
			this.getUserInfo()
			this.getNoticeList()
		},
		methods: {
			navigateToService() {
				uni.navigateTo({
					url: '/pages/webView/index?type=serve',
				});
			},
			changeLang(opt) {
				if (this.activeLang == opt.value) return
				uni.setStorageSync('lang', opt.value);
				this.activeLang = opt.value
				setTimeout(() => {
					this.closeMask()
				}, 200);
			},
			changeTheme(opt) {
				if (this.activeTheme == opt.value) return
				uni.setStorageSync('theme', opt.value);
				this.activeTheme = opt.value
				setTimeout(() => {
					this.closeMask()
					uni.reLaunch({
						url: '/' + getCurrentPages()[0].route
					});
				}, 200);
			},
			pagePath(path) {
				uni.navigateTo({
					url: path
				})
			},
			copy() {
				uni.setClipboardData({
					data: this.userInfo.code,
					success: () => {
						uni.$u.toast("邀请码复制成功!")
					}
				})
			},
			maskShow(key) {
				this.show = true
				switch (key) {
					case 'lang':
						this.langShow = true
						this.themeShow = false
						this.maskTitle = "选择语言"
						break;
					case 'theme':
						this.themeShow = true
						this.langShow = false
						this.maskTitle = "选择主题"
						break;
				}
			},
			closeMask() {
				this.show = false
				this.langShow = false
				this.themeShow = false
			},
			// 获取消息公告列表
			getNoticeList() {
				noticeListApi({
					page: '1',
				}).then(res => {
					this.list = res.data.data.data
					console.log(this.list)
				})
			},
			// 获取个人信息
			getUserInfo() {
				/* const token = localStorage.getItem('token');
				let data={
					 token:token,
				} */
				userInfoApi().then(res => {
					this.userInfo = res.data.data
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		.content {
			.header {
				.userinfo {
					.avatar {
						width: 110rpx;
						height: 110rpx;
						border-radius: 50%;
						overflow: hidden;
						box-shadow: 0px 3px 8px 0 rgba(0, 0, 0, .16);
					}

					.user {
						margin-left: 30rpx;

						.username {
							font-size: 44rpx;
						}

						.user_id {
							font-size: 30rpx;
							opacity: 0.5;
						}
					}
				}

				.setting {
					background-color: rgba(0, 101, 255, .1);
					padding: 7px 13px;
					border-radius: 10px;
					color: #0065ff;
				}
			}

			.balance {
				background-color: #0065ff;
				background-image: url("../../static/img/balance_card.png");
				background-size: cover;
				border-radius: 20px;
				padding: 40rpx 40rpx 100rpx;
				margin-top: 40rpx;
				color: #fff;
				position: relative;

				.balance_header {
					font-size: 32rpx;

					.cold {
						opacity: .6;
					}
				}

				.balance_detail {
					.data {
						font-size: 58rpx;
					}
				}

				.balance_btns {
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translate(-50%, 50%);
					width: 84%;
					color: #000;
					column-gap: 50rpx;

					.btn {
						flex: 1;
						display: flex;
						align-items: center;
						justify-content: center;
						height: 96rpx;
						background: #fff;
						box-shadow: 0px 3px 8px 0 rgba(0, 0, 0, .16);
						border-radius: 30rpx;
					}
				}
			}

			.nav {
				margin-top: 100rpx;

				.nav_title {
					margin: 30rpx 0 20rpx;
					font-size: 32rpx;
					opacity: .3;
				}

				.nav_list {
					.item {
						border-bottom: 2rpx solid rgba(207, 237, 237, .46);
						column-gap: 30rpx;
						padding: 30rpx 0;

						.icon_box {
							width: 80rpx;
							height: 80rpx;
							border-radius: 50%;
							background-color: rgba(0, 101, 255, .1);
						}

						.nav_name {
							flex: 1;
							font-size: 32rpx;
						}

						.forward_icon {
							opacity: .3;
						}

						.nav_tips {
							font-size: 32rpx;
							opacity: .3;
						}

						.message_box {
							padding: 7px 13px;
							color: #0065ff;
							background-color: #e5edfe;
							border-radius: 20rpx;
							font-size: 32rpx;
						}
					}
				}


			}
		}
	}

	.mask {
		width: 100%;
		height: 60vh;
		background: #fff;
		padding: 40rpx;
		border-radius: 40rpx 40rpx 0 0;
		color: #333;

		.mask_close {
			width: 72rpx;
			height: 72rpx;
			background-color: hsla(0, 0%, 92.9%, .46);
			border-radius: 20rpx;
		}

		.mask_content {
			.mask_title {
				font-size: 50rpx;
				padding-top: 40rpx;
				font-family: PM;
			}

			.list {
				.item {
					column-gap: 30rpx;
					margin-top: 36rpx;

					.item_logo {
						width: 90rpx;
						height: 90rpx;
						border-radius: 50%;
						box-shadow: 0px 6rpx 16rpx 0 rgba(0, 0, 0, .16)
					}

					.detail {
						flex: 1;

						.item_value {
							opacity: .5;
						}

						.item_title {
							font-size: 32rpx;
							font-family: PM;
						}
					}

					.item_icon {
						width: 36rpx;
						height: 36rpx;
						opacity: .2;
						border: 2rpx solid #3d3d3d;
						border-radius: 6rpx;
					}

					.active_icon {
						opacity: 1;
						border-color: #0065ff;
						background: #0065ff;
					}
				}
			}
		}
	}
</style>